<template>
  <div class="order-management">
    <h2 class="text-2xl font-bold mb-4">订单管理</h2>
    <a-row :gutter="16" class="mb-4">
      <a-col :xs="24" :sm="12" :md="8" :lg="6">
        <a-input-search
            v-model:value="searchValue"
            placeholder="搜索订单"
            @search="onSearch"
            class="w-full"
        />
      </a-col>
      <a-col :xs="24" :sm="12" :md="8" :lg="6" class="mt-2 sm:mt-0">
        <a-select
            v-model:value="filterStatus"
            style="width: 100%"
            @change="handleFilterChange"
            placeholder="选择订单状态"
        >
          <a-select-option value="">全部状态</a-select-option>
          <a-select-option value="pending">待处理</a-select-option>
          <a-select-option value="processing">处理中</a-select-option>
          <a-select-option value="completed">已完成</a-select-option>
          <a-select-option value="cancelled">已取消</a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <div v-if="filterStatus" class="mb-4 text-blue-600">
      当前显示: {{ getStatusText(filterStatus) }}状态的订单
    </div>
    <a-table
        :columns="columns"
        :data-source="filteredData"
        :pagination="pagination"
        class="bg-white rounded-lg shadow-md"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="viewOrderDetails(record)">查看详情</a>
            <a-select
                v-model:value="record.status"
                style="width: 120px"
                @change="(value) => updateOrderStatus(record.key, value)"
            >
              <a-select-option value="pending">待处理</a-select-option>
              <a-select-option value="processing">处理中</a-select-option>
              <a-select-option value="completed">已完成</a-select-option>
              <a-select-option value="cancelled">已取消</a-select-option>
            </a-select>
          </a-space>
        </template>
      </template>
    </a-table>
    <a-modal
        v-model:visible="modalVisible"
        title="订单详情"
        @ok="handleOk"
        class="order-modal"
    >
      <a-descriptions bordered :column="1">
        <a-descriptions-item label="订单号">{{ selectedOrder.orderNo }}</a-descriptions-item>
        <a-descriptions-item label="客户">{{ selectedOrder.customer }}</a-descriptions-item>
        <a-descriptions-item label="金额">{{ selectedOrder.amount }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="getStatusColor(selectedOrder.status)">
            {{ getStatusText(selectedOrder.status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="下单时间">{{ selectedOrder.orderTime }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, computed} from 'vue';
import {message} from 'ant-design-vue';

const searchValue = ref('');
const filterStatus = ref('');
const modalVisible = ref(false);
const selectedOrder = ref({});

const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
  },
  {
    title: '客户',
    dataIndex: 'customer',
    key: 'customer',
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (text) => {
      const color = getStatusColor(text);
      return h('span', {style: {color}}, getStatusText(text));
    },
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    key: 'orderTime',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const data = ref([
  {
    key: '1',
    orderNo: 'ORD001',
    customer: '张三',
    amount: '¥100',
    status: 'pending',
    orderTime: '2023-05-01 10:00:00',
  },
  {
    key: '2',
    orderNo: 'ORD002',
    customer: '李四',
    amount: '¥200',
    status: 'processing',
    orderTime: '2023-05-02 11:00:00',
  },
  {
    key: '3',
    orderNo: 'ORD003',
    customer: '王五',
    amount: '¥150',
    status: 'completed',
    orderTime: '2023-05-03 09:30:00',
  },
  {
    key: '4',
    orderNo: 'ORD004',
    customer: '赵六',
    amount: '¥300',
    status: 'cancelled',
    orderTime: '2023-05-04 14:15:00',
  },
]);

const filteredData = computed(() => {
  if (!filterStatus.value) return data.value;
  return data.value.filter(item => item.status === filterStatus.value);
});

const pagination = reactive({
  total: computed(() => filteredData.value.length),
  current: 1,
  pageSize: 10,
});

const onSearch = (value) => {
  console.log('搜索:', value);
  // 实现搜索逻辑
};

const handleFilterChange = (value) => {
  console.log('筛选状态:', value);
  filterStatus.value = value;
  pagination.current = 1;
};

const viewOrderDetails = (record) => {
  selectedOrder.value = record;
  modalVisible.value = true;
};

const updateOrderStatus = (key, value) => {
  const index = data.value.findIndex(item => item.key === key);
  if (index !== -1) {
    data.value[index].status = value;
    message.success(`订单状态已更新为${getStatusText(value)}`);
  }
};

const handleOk = () => {
  modalVisible.value = false;
};

const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  };
  return statusMap[status] || status;
};

const getStatusColor = (status) => {
  const colorMap = {
    pending: '#faad14',
    processing: '#1890ff',
    completed: '#52c41a',
    cancelled: '#ff4d4f'
  };
  return colorMap[status] || 'default';
};
</script>

<style scoped>
.order-management {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}

.order-modal :deep(.ant-modal-content) {
  border-radius: 8px;
}

.order-modal :deep(.ant-modal-header) {
  border-radius: 8px 8px 0 0;
}

.order-modal :deep(.ant-descriptions-view) {
  border-radius: 8px;
}
</style>

